<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本4</title>
    <link rel="stylesheet" href="./文本4.css">
</head>

<body>
    <div class="main">
        <div class="main-1">
            <p class="first">
                font-size：
                用于设置元素的字体大小。可以使用绝对单位（如像素）或相对单位（如em或rem）。
                <br>
                例：font-size: 20px;
            </p>
            <p class="second">
                font-weight：
                用于设置元素的字体粗细。可以使用关键字（如normal、bold）或数值（如400、700）。
                <br>
                例:font-weight: bold;
            </p>
            <p class="three">
                font-style：
                用于设置元素的字体样式。可以使用关键字（如normal、italic）来指定字体是否倾斜。
                <br>
                例：font-style: italic;
            </p>
            <p class="four">
                font-variant：
                用于设置元素的字体变体。可以使用关键字（如normal、small-caps）来指定字体是否使用小型大写字母。
                <br>
                例：font-variant: small-caps;
            </p>
        </div>
        <div class="main-2">
            <p class="one">中文字体名称英文对照表</p>
            <p class="two">
                宋体 - SimSun
                <br>
                黑体 - SimHei
                <br>
                微软雅黑 - Microsoft Yahei
                <br>
                微软正黑体 - Microsoft JhengHei
                <br>
                楷体 - KaiTi
                <br>
                新宋体 -NSimSu
                <br>
                仿宋 - FangSong
                <br>
                华文细黑 - STXihei
                <br>
                华文楷体 -STKaiti
                <br>
                华文宋体 - STSong
                <br>
                例：font-family:'楷体';
                <br>
                例：font-family:'SimSun';
            </p>
        </div>
        <div class="main-3">
            <p class="last-1">font-weight的两套度量</p>
            <div class="last">
                <p class="last-2">This is lighter text.</p>
                <p class="last-3">This is normal text.</p>
                <p class="last-4">This is bold text.</p>
                <p class="last-5">This is bolder text.</p>
                <p class="last-6">This is text with weight 100.</p>
                <p class="last-7">This is text with weight 400.</p>
                <p class="last-8">This is text with weight 700.</p>
            </div>
        </div>
    </div>
</body>

</html>